<template>
	<view class="logistics">
		<view class="query">
			<view class="btn_add" @click="handleAdd">新增物流信息</view>
			<view class="btn_filter" @click="handleFilter">筛选</view>
		</view>
		<view class="content">
			<view v-for="(item, index) in dataList" :key="index" class="content-item">
				<view class="tag" :class="{
            send: item.express_type == '寄件',
            receive: item.express_type == '收件',
          }">{{ item.express_type || "" }}</view>
				<view class="row">
					<view class="row-label">
						{{ item.express_type === "寄件" ? "收件" : "寄件" }}人
					</view>
					<view class="row-value">{{ item.name }}</view>
				</view>
				<view class="row">
					<view class="row-label">
						{{ item.express_type === "寄件" ? "收件" : "寄件" }}地址
					</view>
					<view class="row-value">{{ item.address }}</view>
				</view>
				<view class="row">
					<view class="row-label">
						{{ item.express_type === "寄件" ? "收件" : "寄件" }}电话
					</view>
					<view class="row-value">{{ item.mobile }}</view>
				</view>
				<view class="row">
					<view class="row-label">设备品牌</view>
					<view class="row-value">{{ item.equipment_name || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">设备型号</view>
					<view class="row-value">{{ item.equipment_model || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">设备序列号</view>
					<view class="row-value">{{ item.equipment_number || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">结算类型</view>
					<view class="row-value">{{ item.pay_type == 1?'月结':(item.pay_type == 2?'个人垫付':'其他') }}</view>
				</view>
				<view class="row">
					<view class="row-label">运费</view>
					<view class="row-value">￥{{ item.money||0}}</view>
				</view>
				<view class="row">
					<view class="row-label">附件</view>
					<view class="row-value">{{ item.attachment_file || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">快递单号</view>
					<view class="row-value">{{ item.express_number || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">备注</view>
					<view class="row-value">{{ item.remark || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">关联工单号</view>
					<view class="row-value">{{ item.work_order_number || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">开单号</view>
					<view class="row-value">{{ item.newcustomer_id || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">创建时间</view>
					<view class="row-value">{{ item.createtime || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">物流图片</view>
					<view class="row-value">
						<image v-for="(img, k) in item.express_images" :key="k" :src="img"
							@click="preview(k, item.express_images)" />
					</view>
				</view>
			</view>
		</view>
		<empty v-if="dataList.length == 0" />
		<uni-popup ref="filterRef" type="right" border-radius="10px 10px 0 0">
			<view class="filter-box">
				<view class="filter-row">物流类型</view>
				<view class="filter-row">
					<radio-group @change="typeChange">
						<label v-for="item in typeList" :key="item.value" style="margin-right: 20rpx">
							<radio :value="item.value" :checked="item.value == queryParams.express_type" />
							{{ item.label }}
						</label>
					</radio-group>
				</view>
				<view class="filter-row">收(寄)名字</view>
				<view class="filter-row border">
					<input type="text" v-model="queryParams.name" placeholder="请输入名字" />
				</view>
				<view class="filter-row">收(寄)电话</view>
				<view class="filter-row border">
					<input type="number" v-model="queryParams.mobile" maxlength="11" placeholder="请输入电话" />
				</view>
				<view class="filter-row">快递单号</view>
				<view class="filter-row border">
					<input type="text" v-model="queryParams.express_number" placeholder="请输入快递单号" />
				</view>
				<view class="filter-row">关联工单号</view>
				<xfl-select ref="xflRef" :list="workOrderList" :clearable="false" :listShow="false" :isCanInput="true"
					:placeholder="'请选择关联工单号'"
					style_Container="margin: 10px; width: -webkit-fill-available; padding: 10rpx;" :focusShowList="true"
					@change="orderChange" @input="getOrderList" />
					
				<view class="filter-row">开单号</view>
				<xfl-select ref="xflRef" :list="workStartList" :clearable="false" :listShow="false" :isCanInput="true"
					:placeholder="'请选择开单号'"
					style_Container="margin: 10px; width: -webkit-fill-available; padding: 10rpx;" :focusShowList="true"
					@change="startChange" @input="getStartList" />
				<view class="bottom_btn">
					<view class="left_btn" @click="resetQuery">重置</view>
					<view class="right_btn" @click="handleQuery">查询</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import xflSelect from "@/components/xfl-select/xfl-select.vue";
	export default {
		components: {
			empty,
			xflSelect,
		},
		data() {
			return {
				dataList: [],
				last_page: 1,
				queryParams: {
					express_type: "",
					name: "",
					mobile: "",
					express_number: "",
					newcustomer_id:"",
					work_order_number: "",
					page: 1,
				},
				typeList: [{
						value: "",
						label: "全部"
					},
					{
						value: "寄件",
						label: "寄件"
					},
					{
						value: "收件",
						label: "收件"
					},
				],
				workOrderList: [], // 关联工单列表
				workStartList:[]
			};
		},
		onLoad(e) {
			this.handleQuery();
		},
		onShow() {
			this.handleQuery();
		},
		methods: {
			// 获取数据列表
			getList() {
				this.$https.post("/logistics/logisticsList", this.queryParams).then((res) => {
					this.last_page = res.data.last_page;
					let list = res.data.data;
					list.forEach((i) => {
						if (i.express_images) {
							i.express_images = i.express_images.split(",");
						} else {
							i.express_images = [];
						}
					});
					this.dataList = this.queryParams.page == 1 ? list : this.dataList.concat(list);
					// console.log(this.dataList,'000000000000')
				});
			},
			// 预览图片
			preview(current, urls) {
				uni.previewImage({
					current,
					urls,
				});
			},
			// 获取工单列表
			getStartList(e) {
				this.$https
					.post("/logistics/getNewcustomerId", {
						newcustomer_id: e.detail.value
					})
					.then((res) => {
						this.workStartList = res.data;
					});
			},
			// 获取工单列表
			getOrderList(e) {
				this.$https
					.post("/logistics/getWorkOrderNumber", {
						work_id: e.detail.value
					})
					.then((res) => {
						this.workOrderList = res.data;
					});
			},
			// 新增物流
			handleAdd() {
				uni.navigateTo({
					url: "/pages/logistics/addLogistics"
				});
			},
			// 筛选
			handleFilter() {
				this.$refs.filterRef.open();
			},
			// 切换类型
			typeChange(e) {
				this.queryParams.express_type = e.detail.value;
			},
			// 选择关联工单
			startChange(e) {
				this.queryParams.newcustomer_id = e.newVal;
			},
			// 选择关联工单
			orderChange(e) {
				this.queryParams.work_order_number = e.newVal;
			},
			// 重置条件查询
			resetQuery() {
				this.$refs.xflRef.onClear();
				this.queryParams = {
					express_type: '',
					name: "",
					mobile: "",
					express_number: "",
					work_order_number: "",
					newcustomer_id:"",
					page: 1,
				};
				this.$refs.filterRef.close();
				this.getList();
			},
			// 条件搜索
			handleQuery() {
				this.queryParams.page = 1;
				this.$refs.filterRef.close();
				this.getList();
			},
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page = this.queryParams.page + 1;
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.logistics {
		background-color: #f7f8fb;
		padding: 0 32rpx 18rpx;
		min-height: 100vh;

		.query {
			display: flex;
			align-items: center;
			height: 80rpx;
			justify-content: space-between;
			color: #fff;
			position: sticky;
			top: 0;
			z-index: 9;
			background-color: #f7f8fb;
			padding: 10rpx;
			font-size: 26rpx;

			.btn_add {
				padding: 12rpx 20rpx;
				background-color: #409eff;
				border-radius: 50rpx;
			}

			.btn_filter {
				padding: 12rpx 30rpx;
				background-color: #7ac85e;
				border-radius: 50rpx;
			}
		}

		.content {
			&-item {
				box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.05);
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				.tag {
					position: absolute;
					right: 0;
					top: 0;
					padding: 10rpx 30rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #82dcec;
					border-radius: 0 20rpx 0 20rpx;
				}

				.row {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					line-height: 44rpx;

					&-label {
						color: #969699;
						width: 160rpx;
					}

					&-value {
						color: #303030;
						flex: 1;
						word-break: break-all;

						image {
							width: 120rpx;
							height: 120rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
						}
					}
				}

				.send {
					background-color: #82dcec;
				}

				.receive {
					background-color: #f8c168;
				}
			}
		}
	}

	.filter-box {
		background-color: #fff;
		width: 600rpx;
		height: 100%;
		position: relative;
		z-index: 99;

		.filter-row {
			color: #303030;
			font-size: 28rpx;
			padding: 20rpx;
		}

		.border {
			border: 1rpx solid #b7b7b7;
			border-radius: 10rpx;
			margin: 0 20rpx;
			padding: 20rpx;
		}

		.bottom_btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;

			view {
				flex: 1;
				color: #fff;
				display: flex;
				height: 80rpx;
				align-items: center;
				justify-content: center;
			}

			.left_btn {
				background-color: #409eff;
			}

			.right_btn {
				background-color: #7ac85e;
			}
		}
	}
</style>